<template>
  <div>
    <el-container>
      <el-header class="main-header">
        <nav class="navbar navbar-static-top">
          <!-- Logo -->
          <a href="#" class="logo" style="text-align:center">
            <span class="logo-lg"><img src="../assets/logo.png"></span>
          </a>
          <div class="right-menu">
            <el-dropdown class="avatar-container right-menu-item" trigger="click">
              <div class="avatar-wrapper">
                <img src="../assets/user2-160x160.jpg" class="user-avatar" height="30">
                {{username}}
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item divided>
                  <span style="display:block;">修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <span style="display:block;"><a href="/logout.do">退出</a></span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </nav>
      </el-header>
      <el-container>
        <el-aside width="200px" >
            <el-menu background-color="rgb(51,55,68)"
                     text-color="#fff"
                      active-text-color="#409EFF"
                     :unique-opened="true"
                      :router="true">
              <el-submenu v-for="menu in menuList" :index="menu.path">
                <template slot="title">
                  <i class="fa" :class="menu.icon"></i>
                  {{menu.title}}
                </template>
                <template v-for="child in menu.children" >
                  <el-menu-item :index="child.path">
                    {{child.title}}
                  </el-menu-item>
                </template>
              </el-submenu>
            </el-menu>
        </el-aside>
        <el-main style="background-color: #fbfffb ;padding:5px 0 0 5px">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return{
      username: '张三',
      menuList: [
        {
          "path": "workSpace",
          "title": "工作台",
          "icon":"el-icon-menu",
          "children": [
            {
              "path": "/workSpace",
              "title": "首页",
              "children":[]
            },
          ],
        },
        {
          "path": "check",
          "title": "体检管理",
          "icon":"el-icon-first-aid-kit",
          "children": [
            {
              "path": "/orderList",
              "title": "预约列表",
              "children":[]
            },
            {
              "path": "/orderSetup",
              "title": "预约设置",
              "children":[]
            },
            {
              "path": "/setMeal",
              "title": "套餐管理",
              "children":[]
            },
            {
              "path": "/checkGroup",
              "title": "检查组管理",
              "children":[]
            },
            {
              "path": "/checkItem",
              "title": "检查项管理",
              "children":[]
            },
          ]
        },
        {
          "path": "2",
          "title": "会员管理",
          "icon":"el-icon-user-solid",
          "children": [
            {
              "path": "/2-1",
              "title": "会员档案",
              "linkUrl":"member.html",
              "children":[]
            },
            {
              "path": "/2-2",
              "title": "体检上传",
              "children":[]
            },
            {
              "path": "/2-3",
              "title": "会员统计",
              "linkUrl":"all-item-list.html",
              "children":[]
            },
          ]
        },
        {
          "path": "4",
          "title": "健康评估",
          "icon":"el-icon-video-camera",
          "children":[
            {
              "path": "/4-1",
              "title": "中医体质辨识",
              "linkUrl":"all-medical-list.html",
              "children":[]
            },
          ]
        },
        {
          "path": "5",     //菜单项所对应的路由路径
          "title": "统计分析",     //菜单项名称
          "icon":"el-icon-s-data",
          "children":[//是否有子菜单，若没有，则为[]
            {
              "path": "/5-1",
              "title": "会员数量统计",
              "linkUrl":"report_member.html",
              "children":[]
            },
            {
              "path": "/5-2",
              "title": "预约套餐占比统计",
              "linkUrl":"report_setmeal.html",
              "children":[]
            },
            {
              "path": "/5-3",
              "title": "运营数据统计",
              "linkUrl":"report_business.html",
              "children":[]
            }
          ]
        }
      ],
    }
  }
}
</script>
<style>


.el-menu .fa{
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
}
.right-menu {
  float: right;
  padding: 18px 30px 0 0;
  color: #fff;
}
.main-header{
  background: #0abdfe;
  min-height: 70px;
  padding: 20px 0 0 0;
  height: 50px;
  float: left;
  display: inline-block;
}


</style>
